In AngularJS, custom directives are a powerful feature that allows you to extend HTML with new elements, attributes, classes, or comments. The $element parameter in a custom directive's link function refers to the element on which the directive is applied.
Keep in mind when you create a custom directive,
New directives are created by using the .directive function.
To invoke the new directive, make an HTML element with the same tag name as the new directive.
When naming a directive, you must use a camel case name, myDirective, but when invoking it, you must use
- separated name, my-directive
Basic requirements for creating custom instructions ,
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope){
$scope.name = "This is Custom Directive file message";
}])
.directive('myDirective', function(){
return {
restrict : 'E',
// Corrected the templateUrl and used it within the return object
template : "<h1>This is my custom message</h1>",
link : function(scope, element, attrs){
element.css('color', 'red');
}
};
});
In this example:
- restrict: 'E' restricts the directive to be used as an element.
- In the link function, the second parameter element refers to the element on which the directive is applied.
- You can use element to manipulate the DOM within the directive's scope. For instance, you can change CSS styles, add event listeners, or perform other DOM manipulations.
The legal restrict values in AngularJS are:
Efor Element nameAfor AttributeCfor ClassMfor Comment
By default the value is EA, meaning that both Element names and attribute names can invoke the directive.
The examples below will all produce the same result,
Element name
<my-directive text-color="blue"></my-directive>Attribute
<div my-directive></div>Class
<div class="my-directive"></div>Comment
<!-- my-directive -->You can restrict your directives to only be invoked by some of the methods like.
angular.module('myApp', [])
.directive("myDirective", function() {
return {
// restrict only for custom Attribute
restrict : "A",
template : "<h1>Made by a directive!</h1>"
};
});You can also load a html file in your custom directive using templateUrl in place of template. The purpose of providing the location of another HTML file in the template URL is to use the HTML file as a partial view in your Angular application.
Here is an example of creating a Custom_Directive.html to create a custom directive in angularJs
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body data-ng-controller ="myController">
<!-- first way to load the custome file in your custome directive as attribute -->
<div my-directive>
</div>
<hr>
<!-- other way to load custome file in your custome derective as element -->
<my-directive></my-directive>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script>
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope){
$scope.name = "This is Custom Directive file message";
}])
.directive('myDirective', function(){
return {
// Corrected the templateUrl and used it within the return object
templateUrl: "Custom-file.html",
};
});
</script>
</body>
</html>now, create another HTML file Custom-file.html in the same folder and pass the file name with extension in templateUrl
<div class="row">
<div class="col-12">
<!-- -->
<h3>This is custome file</h3>
<!-- bind the value of $scope.name here -->
<p data-ng-bind="name"></p>
</div>
</div>Output:
This is custome file
This is Custom Directive file message
This is custome file
This is Custom Directive file message
You can also use CSS property on your custom directive element, and attribute like given below,
angular.module('myApp', [])
.controller('myController', ['$scope', function($scope){
$scope.name = "This is Custom Directive file message";
}])
.directive('myDirective', function(){
return {
// Custom file location with file name
templateUrl: "Custom-file.html",
link: function(scope, element, attrs){
// apply the css on custome file attributes
var textColor = attrs.textColor;
// Applying CSS properties to the element
element.css({
'color': textColor
});
// apply mouseover event on customefile elements
element.on('mouseover', function(){
element.css('background-color', 'yellow');
});
}
};
});Output:
I hope this article will be useful for you.
Thank you!
Leave Comment